<template>
  <div class="eject">
    <div class="choice">
      <el-select @input="dialogFormVisible = true" v-model="value" placeholder="请选择所需的业务编号" @click="parentData">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <el-dialog title :visible.sync="dialogFormVisible" width="750px">
      <div v-if="value">
        <el-input
          style="margin-bottom:5px"
          v-model="input"
          placeholder="请输入搜索内容"
          @input="vague(input)"
        ></el-input>

        <el-table
          :data="show ? table : renderData"
          borderborderstyle="width: 100%"
          border
          align="center"
        >
          <el-table-column prop="parent" label="国际分类" width="180"></el-table-column>
          <el-table-column prop="id" label="类似群" width="180"></el-table-column>
          <el-table-column prop="category" label="商品/服务项目" width="230"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="paging">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          ></el-pagination>
        </div>

        <div class="output">
          <div class="see">
            <el-tag
              v-for="tag in tags"
              :key="tag.id"
              closable
              :type="tag.type"
              @close="handleClose(tag)"
            >{{tag.category}}</el-tag>
          </div>

          <div slot="footer" class="determine">
            <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
            <el-button @click="abolish">取 消</el-button>
            <el-button type="primary" @click="determine">确 定</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      table: [], // 搜索出的值
      currentPage: 1, // 当前页
      pageSize: 5, // 一页展示的条数
      totalCount: 0, // 数据总数
      renderData: [], // 真正渲染出的数据
      tags: [], // 添加的数据
      input: "", //搜索输入的数据
      show: "", //判断显示什么
      trademarkClassification: "", //暂存数据
      options: [],  //项目类别数字编号
      value: "",   // 客户选择的编号
      dialogTableVisible: false,
      dialogFormVisible: false,
    };
  },

  methods: {
    //提示模板
    open1(msg, types = "success") {
      this.$message({
        message: msg,
        type: types,
      });
    },

    // 添加数据
    handleEdit(intm, e) {
      if (this.tags.length == 0) {
        this.tags.push(e);
      } else {
        if (this.tags.indexOf(e) > -1) {
          this.open1("请勿添加相同的数据", "error");
        } else {
          this.tags.push(e);
        }
      }
      this.$emit("show", this.tags);
    },

    // 修改一页的条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.slicePage();
    },
    // 修改当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.slicePage();
    },
    // 页面划分
    slicePage() {
      const len = this.tableData.length;
      const begin = (this.currentPage - 1) * this.pageSize; // 开始下标
      const end = begin + this.pageSize; // 结束下标
      this.renderData =
        end >= len
          ? this.tableData.slice(begin, len)
          : this.tableData.slice(begin, end);
    },

    //删除
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },

    // 模糊搜索
    vague(input) {
      this.show = true;
      let _this = this;
      _this.table = _this.tableData.filter(function (Val) {
        if (
          Val.category.includes(_this.input)
          //|| Val.id.includes(_this.input)
        ) {
          _this.table.push(Val);
          return _this.table;
        }
      });
    },

    // 确定
    determine() {
      if (this.input.length >= 1) {
        this.input = "";
        this.show = "";
      }
      this.dialogFormVisible = false;
      // this.$emit("show", this.tags);
      return this.tags;
    },

    // 取消
    abolish() {
      this.dialogFormVisible = false;
      this.tags = [];
      this.$emit("show", this.tags);
      console.log(this.tags,6666);
    },

    parentData(){
      console.log(666666);
    }
  },

  // 获取数据
  watch: {
    value(newsval, oldval) {
      if (newsval != oldval) {
        this.$http.get(`trademark/tradeCategory/s/${newsval}`).then((res) => {
          this.tableData = res.data.data;
          this.totalCount = res.data.data.length;
          this.handleCurrentChange(1);
          this.handleSizeChange(5);
        });
      }
      // console.log(this.$parent.$parent.$parent.tags,520);
      // this.$parent.$parent.$parent.tags

      // this.tags = this.$parent.$parent.$parent.tags 

    },

    //搜索内容后 分页
    input(e) {
      if (e == "") {
        this.show = "";
        this.handleCurrentChange(1);
        this.handleSizeChange(5);
      }
    },
    // 获取商标类别(数字编号)
    trademarkClassification(e) {
      let data = e;
      let i;
      for (i = 0; i < data.length; i++) {
        this.options.push(
          { value: data[i].id}
        )
        // break;
      }
    },

    renderData(){
      // console.log(object);
    }
  },
  mounted() {
    // 开始获取商标
    this.$http.get(`trademark/tradeCategory/p/`).then((res) => {
      this.trademarkClassification = res.data.data;
    });
  },
};
</script>

<style  lang="less" scoped>
.eject {
  width: 700px;
}

.paging {
  margin-top: 20px;
}

.see {
  margin-top: 20px;
  width: 500px;
}
.el-tag + .el-tag {
  /* margin-left: 10px;
  margin-top: 20px; */
  margin: 10px;
}
.output {
  display: flex;
  justify-content: space-between;
}
.choice {
  margin: 20px;
}
.determine {
  width: 200px;
  margin: 20px;
}
/deep/ .has-gutter .el-table_1_column_1 {
  text-align: center !important;
}
/deep/ .has-gutter .el-table_1_column_2 {
  text-align: center !important;
}
/deep/ .has-gutter .el-table_1_column_3 {
  text-align: center !important;
}
</style>